<template>
	<div class="home">
		<!-- 首页头部 -->
		<van-nav-bar :fixed="true" :placeholder="true" z-index="999">
			<template v-slot:title>
				<router-link class="homeSearch" to="/search" custom v-slot="{ navigate }">
					<span @click="navigate" role="link">
						<van-icon name="search" color="#eee" />搜索
					</span>
				</router-link>
			</template>
		</van-nav-bar>
		<!-- 导航栏 -->
		<div class="home-tabs">
			<van-tabs v-model="active">
				<van-tab :title="item.name" v-for="item in cateList" :key="item._id"></van-tab>
			</van-tabs>
		</div>
		<div class="articleListWrap">
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了"
		:immediate-check = "false"  
		 @load="getArticle"> 
		 
		 <template #loading>
		      <LoadingSvg></LoadingSvg>
		 </template>
			<ArticleList :list="articleList"  :newData="newData"></ArticleList>
	
			
		</van-list>
		</div>
	</div>
</template>

<script>
	import {
		Tab,
		Tabs,
		List
	} from "vant";
	import LoadingSvg from '@/components/LoadingSvg.vue'

	import  ArticleList from '@/components/ArticleList/index.vue'
	import { 
		get_cate_list,
		get_article_list
	} from "@/api/home.js";
	import {
		timeForm
	} from "@/utils/timeform.js";
	import {QnImgFilter} from '@/utils'
	
	export default {
		name: "HomeView",
		components: {
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[List.name]: List,
			[LoadingSvg.name]:LoadingSvg,
			[ArticleList.name]:ArticleList
		},
	
		data() {
			return {
				active: 0,
			
				articleList: [],
				now: new Date().getTime(),
				loading:false,//   上拉加载组件 加载中的状态    
				// 如果loading是true  等于上一次的数据还没请求成功   10-20 还没成功
				// 这时候是不会给新的数据的   想要20-30 不给你
                finished:false, //   所有的数据是否全部加载完毕  
				limit:10,
				skip:0,
				newData:[]
				
			};
		},

		computed: {
			cateList(){
                 return this.$store.state.cate.cateList
			},
			cate_id() {
				return this.cateList[this.active] && this.cateList[this.active]._id;
			},
		},
		watch: {
			cate_id: {
				immediate:true,
				handler(n){
					if(!n) return 
					this.articleList = [];//  分类ID变化  数据需要重置
					this.finished = false;   //  重置操作
					this.newData = []
					this.getArticle();
				}
			
			},
		},
		created() {
			
		},

		methods: {
	
			//  获取文章
			getArticle() {
				let {
					cate_id,
					now,
					limit
				} = this;
				

				get_article_list({
						cate_id,
						skip:this.articleList.length,
						limit 
					})
					.then(({
						data,
						code,
						count
					}) => {
						console.log(data);
						if (code == 0) {
							
							let new_data   = data.map((v) => {
								v.timeStr = timeForm(v.time, false, now);
								v.imageSrc = v.imageSrc.map(img=>{
									return   QnImgFilter(img)
								})
								return v;
							});
							this.newData = new_data
							
							this.articleList.push(...new_data)
							
							//   判断一下 数据加载完毕没  如果加载完毕 把finished设为true  
							// 否则把loading改成false
						if(this.articleList.length>=count){
							this.finished = true;  
						}else{
							this.loading = false
						}	
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
	};
</script>



<style lang="scss" scoped>
	.home ::v-deep .van-nav-bar {
		background-color: #ee0a24;
	}

	.home ::v-deep .van-nav-bar__title {
		max-width: 80%;
	}

	.home ::v-deep .van-tabs__wrap--scrollable .van-tab {
		border-bottom: 1px solid #eee;
		border-right: 1px solid #eee;
	}

	.home ::v-deep .van-tabs__line {
		bottom: 20px;
		width: 20px;
	}

	.homeSearch {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80vw;
		height: 36px;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 20px;
		color: #eee;
	}

	.home-tabs {
		width: 100%;
		height: 50px;
		position: fixed;
		left: 0;
		top: 46px;
	}
	.articleListWrap{
		padding-top: 46px; 
		padding-bottom:50px;
		overflow: hidden;
	}

</style>
